import { renderToStaticNodeStream } from 'react-dom/server'

import MainApp from '../client/main/App.js'
import MainTemplate from '../templates/MainTemplate.js'
import getScripts from '../utils/getScripts.js'
import { createElement } from 'react'

const doctype = '<!DOCTYPE html>'
const globalURLs =
  process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging'
    ? {
        '@emotion/react': '/@emotion/react@11.11.1/dist/emotion-react.umd.min.js',
        react: '/react@18.2.0/umd/react.production.min.js',
        'react-dom': '/react-dom@18.2.0/umd/react-dom.production.min.js'
      }
    : {
        '@emotion/react': '/@emotion/react@11.11.1/dist/emotion-react.umd.min.js',
        react: '/react@18.2.0/umd/react.development.js',
        'react-dom': '/react-dom@18.2.0/umd/react-dom.development.js'
      }

export default function serveMainPage (req, res) {
  const content = createElement(MainApp)
  const elements = getScripts('main', 'iife', globalURLs)

  const stream = renderToStaticNodeStream(
    createElement(MainTemplate, { content, elements })
  )

  res
    .set({
      'Content-Type': 'text/html',
      'Cache-Control': 'max-age=14400', // 4 hours
      'Cache-Tag': 'main'
    })
  res.write(doctype)
  stream.pipe(res)
}
